<template>
  <!-- <view class="container"> -->
  	<button class="btn play-pause" @tap="btn()">
  		<image class="btnimage" src="../../static/icon/opendoor.png" />
  	</button>
  
  	
  <!-- </view> -->
  
  
  
</template>

<script>

import {_openAll,_closeAll,_closeOneInfo,_openOneInfo,_openidCardlock} from '@/common/vmeitime-http/controller.js'
export default {
  components: {  },
  data() {
    return {
    };
  },
  methods: {
		btn(){
			console.log("1")
			uni.showLoading({
				title:"操作中"
			})
			var obj = {
				  "duerosType": "LIGHT",
				  "equipId": uni.getStorageSync('equipmentlist').DOORLOCK[0].equipId,
				  "hotelId": uni.getStorageSync('controller').hotleId,
				  "position": uni.getStorageSync('equipmentlist').DOORLOCK[0].position,
				  "positionBak": uni.getStorageSync('equipmentlist').DOORLOCK[0].positionBak,
				  "realName":uni.getStorageSync('controller').realName,
				  "roomId": uni.getStorageSync('controller').id,
				  "roomNumber": uni.getStorageSync('controller').name,
				}
			if(uni.getStorageSync('equipmentlist').DOORLOCK[0].controlType*1 == 0 || uni.getStorageSync('equipmentlist').DOORLOCK[0].controlType*1 == 7){
				_openOneInfo(obj).then(res =>{
					console.log(res)
					uni.showToast({
						title:"成功"
					})
				})
			}else{
				_openidCardlock(obj).then(res =>{
					console.log(res)
					uni.showToast({
						title:"成功"
					})
				})
			}
				
			
    // buttons.forEach(btn => {
    // 	btn.addEventListener("click", () => {
    // 		btn.classList.toggle("active");
    // 	});
    // });
	}

  }
	
	
};
</script>


<style>
	*,
	*::before,
	*::after {
	 /* box-sizing: border-box; */
	  margin: 0;
	  padding: 0;
	}
	*:focus,
	*::before:focus,
	*::after:focus {
	  outline: none;
	}
	*::-webkit-input-placeholder,
	*::before::-webkit-input-placeholder,
	*::after::-webkit-input-placeholder {
	  color: #222;
	}
	*::-moz-placeholder,
	*::before::-moz-placeholder,
	*::after::-moz-placeholder {
	  color: #222;
	}
	
	body {
	  width: 100%;
	  height: 100vh;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: #f2f2f2;
	}
	
	.icons {
	  display: none;
	}
	
	button {
	  border: 0;
	}
	button:focus {
	  border: none;
	  outline: 0 !important;
	  outline-style: none;
	}
	button::after{
		border: none;
	}
	
	/* .container {
	  width: 550px;
	  height: 200px;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	} */
	 .btn {
	  position: relative;
	  width: 150px;
	  height: 150px;
	  border-radius: 50%;
	  background: #f2f2f2;
	  transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	  box-shadow: 0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);
	  cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

	}
	.btn:after {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: 0;
	 /* width: 100%;
	  height: 100%; */
	  z-index: 2;
	}
	.btn:active {
	  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
	}
	 .btn:active:after {
	  box-shadow: inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);
	}
	.btn.active.play-pause .icon.pause {
	  opacity: 1;
	  transform: translate(-50%, -50%);
	}
	.btn.active.play-pause .icon.play {
	  opacity: 0;
	  transform: translate(-50%, 50%);
	}
	 .btn .icon-container,
	.btn a {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.btnimage{
		width: 100rpx;
		height: 100rpx;
	}
	
</style>